<template>
	<div class="mt10">
		<div class="flex align-center gap-20">
			<p class="text-title">分类信息</p>
			<el-button type="primary"  v-auth="auth.add" @click="handleOperate('add', {}, '新增项目')">
				<el-icon>
					<icon-add-one theme="outline" size="24" />
				</el-icon>
				自建分类
			</el-button>
		</div>
		<div class="search-input mt10">
			<el-input v-model="searchKey" clearable placeholder="请输入名称" @change="handleSearch" :prefix-icon="Search"></el-input>
		</div>
		<el-scrollbar max-height="70vh">
			<ul class="nav-menu">
				<li
					class="nav-item"
					:class="{ 'active-item': item.id === activeName }"
					v-for="(item, index) in tableData"
					:key="index"
					@click="handleSelect(item)"
				>
					<div class="flex align-center space-between">
						<p class="flex gap-10">
							<!-- <span class="text-border-tag">[{{ item.itemStatus }}]</span> -->
							<span class="text-label">{{ item.itemName }}</span>
						</p>
						<div class="flex align-center gap-10">
							<el-button text type="primary" v-auth="auth.edit" @click.stop="handleOperate('edit', item, '编辑项目')">
								<el-icon>
									<icon-edit theme="outline" size="24" />
								</el-icon>
							</el-button>
							<el-button text type="primary" v-auth="auth.delete" @click.stop="handleOperate('delete', item, '删除项目')">
								<el-icon>
									<icon-close theme="outline" size="24" />
								</el-icon>
							</el-button>
						</div>
					</div>
					<p class="text-tip">
            <span :class="item.itemStatus==0?'text-red mr8':'text-blue mr8'">[{{ item.itemStatus==0?'停用' : '启用' }}]</span>
            <span>{{ item.createUserName }}</span>
          </p>
				</li>
			</ul>
		</el-scrollbar>
		<AplidPaginate v-bind="pageReac" :hide-on-single-page="true" @change="onPageChange" class="pageinate" />

		<el-dialog v-model="visibleForm" :title="dialogTitle" width="520">
			<AplidForm
				v-bind="baseConfig.formConfig"
				v-if="visibleForm"
				v-model="nowRowData"
				@submit="onSubmit"
				@reset="visibleForm = !visibleForm"
			></AplidForm>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { useCrud } from '@/hooks/useCrudHooks'
import { AplidPaginate } from '@/components/AplidCrud'
import { baseConfig,auth } from './config'

const searchKey = ref('')

const activeName = ref('')
const onLoadFormate = (arr) => {
	return new Promise((resolve, reject) => {
		handleSelect(arr[0] || {})
		resolve(arr)
	})
}
const { visibleForm, nowRowData, dialogTitle, tableData, pageReac, handleOperate, onPageChange, onSearch, onSubmit } = useCrud({
	...baseConfig,
	onLoadFormate,
})

const emit = defineEmits(['change'])
const handleSearch = () => {
	onSearch({ itemName: searchKey.value })
}

const handleSelect = (item) => {
	activeName.value = item.id
	emit('change', item)
}
</script>

<style scoped lang="scss">
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
}
.nav-menu {
	padding: 15px 15px 0 0;
	position: relative;
	.active-item {
		position: relative;
		z-index: 0;
		background: radial-gradient(circle at center, #0052d930 0%, #e6f7ff 100%);
		border-radius: 10px;
		padding: 20px;
	}
	.nav-item {
		padding: 4px;
		height: 59px;
		border-bottom: 1px solid #f5f5f5;
		&:hover {
			cursor: pointer;
		}
		.text-border-tag {
			color: #0052d9;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 700;
			letter-spacing: 0;
		}
		.text-label {
			color: #000000e6;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 700;
			letter-spacing: 0;
		}
		.text-tip {
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			text-align: left;
			color: #000;
			opacity: 0.5;
		}
	}
}
</style>
